Naming Conventions
This page documents naming conventions as they pertain to the design system. It is not fully inclusive.
Component Prop Naming
This section details the naming conventions of properties (props) passed into the components package to give a high level vernacular of how we think about the aspects of a component. Naming practices are more art than science due to the variety of functionality of the components so these are not necessarily hard and fast rules so much as guidelines.
General prop guidelines:
- Use
lowerCamelCase
capitalization - Generic behavioral differentiation:
variant
is the primary generic behavioral differentiator, accounting for the most meaningful functional distinctiontype
is the secondary generic behavioral differentiator, if neededmodifier
is the tertiary generic behavioral differentiator, if the component includes enough generic varietyalternative
is the quaternary generic behavioral differentiator, if somehow that level of generic naming is necessary
tone
is a special generic differentiator used for purely basic styling (e.g. Link color); delineated fromstyle
to keep distinct from React Native's default styling prop- If the behavioral differentiation is simple, has generally accepted terminology, and/or is targeted to controlling a specific aspect, then consider functional prop naming over generic naming
- For example:
expandable
for Alert that has expand/collapse behavior instead of secondary generic term (wherevariant
controls Alert types of info/success/warning/error)
- For example:
a11y
should be used for relevant accessibility related props, either as a prefix or descriptor (A11y
) if multiple props have accessibility modifiers